<template>
  <el-main>
    <!--      面包屑        -->
    <el-card class="box-card">
      <el-breadcrumb separator="/" >
        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
        <el-breadcrumb-item
        ><a href="/">promotion management</a></el-breadcrumb-item
        >
        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <!--        列表功能      -->
    <el-card class="box-card">
      <el-row class="mb-4">
        <el-button>全选</el-button>
        <el-button type="success"><el-icon><Document /></el-icon>导出</el-button>
<!--        <el-button type="warning"><el-icon><Switch /></el-icon>转交</el-button>-->
        <el-button type="info"><el-icon><Printer /></el-icon>打印</el-button>
        <el-button type="danger"><el-icon><Delete /></el-icon>删除</el-button>
        <el-badge :value="3" class="item" style="margin-left: 10px;">
          <el-button><el-icon><School /></el-icon>今日到院</el-button>
        </el-badge>
      </el-row>
    </el-card>
    <!--       搜索       -->
    <tableSearch :filedTypeList="filedTypeList"></tableSearch>
    <!--      列表        -->
    <tableList
        :total="total"
        :pagesize="pagesize"
        :tableData="tableListData"
        :tableField="tableField"
        isSelectMult="true"
    ></tableList>
    <!--              //分页-->

    <!-- 更改弹窗状态 start -->
    <el-dialog
        v-model="dialogVisible"
        title="修改状态"
        width="30%"
    >
      <span>是否修改客户到院状态？</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
    <!-- 更改状态弹窗 end -->
  </el-main>
  <!-- 预约到院编辑页面 start -->
  <el-dialog v-model="dialogFormVisible" title="编辑" width="500">
    <el-form :model="form">
      <el-form-item label="是否成交" :label-width="formLabelWidth">
        <el-select v-model="form.is_deal">
          <el-option label="成交" value="shanghai" />
          <el-option label="定金" value="beijing" />
          <el-option label="未成交" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="定金" :label-width="formLabelWidth">
        <el-input v-model="form.earnest" autocomplete="off" />
      </el-form-item>
      <el-form-item label="成交金额" :label-width="formLabelWidth">
        <el-input v-model="form.trading_volume" autocomplete="off" />
      </el-form-item>
      <el-form-item label="实际到院日期" :label-width="formLabelWidth">
        <el-date-picker
            v-model="form.to_date"
            type="date"
            placeholder="选择日期"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 预约到院编辑页面 end -->
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {
  Document
} from '@element-plus/icons-vue'
import { useStore } from "vuex";
import tableList from "../../../common/pages/table.vue";
import tableSearch from "../../../common/pages/tableSearch.vue";
//-------预约页面独立部分js   start -----//
//更改状态
const dialogVisible = ref(false)


//预约表单
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  is_deal: '',
  trading_volume: '3,600.00',  //成交金额
  earnest:'500.00',//定金
  to_date: '',   //到院日期
})
//-------预约页面独立部分js   end -----//

//预约搜索字段
const filedTypeList = ref([
  {
    field: "name",
    label: "姓名",
    type: "text",
    placeholder:"请输入客户名称",
  },
  {
    field: "phone",
    label: "手机号",
    type: "text",
    placeholder:"请输入手机尾号",
  },
  {
    field: "number",
    label: "客户编号",
    type: "text",
    placeholder:"请输入客户编号",
  },
  {
    field: "user",
    label: "跟进人",
    type: "text",
    placeholder:"请输入跟进人",
  },
  {
    field: "booking_date_start",
    label: "预约日期（开始）",
    type: "date",
    placeholder:"请选择预约日期",
  },
  {
    field: "booking_date_end",
    label: "预约日期(结束)",
    type: "date",
    placeholder:"请选择预约日期",
  },
  {
    field: "to_date_start",
    label: "到院日期(开始)",
    type: "date",
    placeholder:"请选择到院日期",
  },
  {
    field: "to_date_end",
    label: "到院日期(结束)",
    type: "date",
    placeholder:"请选择到院日期",
  },
  {
    field: "select",
    label: "状态",
    type: "select",
    placeholder: "请选择客户状态",
    option: [
      {
        label: "已进院",
        value: "shanghai", //选择的真正值
      },
      {
        label: "未进院",
        value: "beijing",
      },
    ],
  },
  {
    field: "select",
    label: "来源",
    type: "select",
    placeholder: "请选择来源渠道",
    option: [
      {
        label: "微信",
        value: "shanghai", //选择的真正值
      },
      {
        label: "转介绍",
        value: "beijing",
      },
    ],
  },
  {
    field: "is_deal",
    label: "是否成交",
    type: "select",
    placeholder: "请选择成交状态",
    option: [
      {
        label: "已成交",
        value: "shanghai", //选择的真正值
      },
      {
        label: "未成交",
        value: "beijing",
      },
    ],
  },
]);

const total = 100   //数据总数
const pagesize = 20  //单页数据数量
//列表字段
const tableField = [
  {
    field:"booking_date",
    label:"预约日期",
    fixed:"",
    width:"150"
  },
  {
    field:"number",
    label:"客户编号",
    width:"150"
  },
  {
    field:"name",
    label:"姓名",
    width:"100"
  },
  {
    field:"phone",
    label:"手机号",
    width:"110"
  },
  {
    field:"source",
    label:"来源渠道",
    width:"110"
  },
  {
    field:"user",
    label:"跟进人",
    width:"100"
  },
  {
    field:"status",
    label:"状态",
    width:"90",
    type:"tag",
    options:[
      "未成交",
      "已成交",
    ],
  },
  {
    field:"to_date",
    label:"实际到院日期",
    width:"150"
  },
  {
    field:"is_deal",
    label:"是否成交",
    width:"90",
    type:"tag",
    options:[
      "未成交",
      "已成交",
    ],
  },
  {
    field:"earnest",
    label:"定金",
    width:"120"
  },
  {
    field:"trading_volume",
    label:"成交金额",
    width:"120"
  },
  {
    field: "opera",
    label: "操作",
    fixed:"right",
    width: "280",
    type:"opera",
    opera:[
      {
        type:"edit",
        text:"编辑",
      },
      {
        type:"status",
        text:"处理",
      },
      {
        type:"delete",
        text:"删除"
      },
    ]
  },
]
//列表数据
const tableListData = [
  {
    booking_date: '2016-05-03 16:16',   //预约日期
    number: 'KPT202303304619',    //客户编号
    name: '张xx', //姓名
    phone: '185****1491', //手机号
    source: '微信',  //客户来源
    user: '张xx',  //跟进人
    status: 1,  //状态
    to_date: '2016-05-03 16:16',   //实际到院日期
    is_deal: 1,   //是否成交
    trading_volume: '3,600.00',  //成交金额
    earnest:'500.00',//定金
  },
]



</script>

<style scoped>

</style>


